<template>
<div class="box" ref="target"></div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { onMounted, ref } from 'vue'
export default {

  setup () {
    const target = ref(null)
    onMounted(() => {
      console.log(target.value)
    })
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          console.log('isIntersecting', isIntersecting)
          stop()
        }
      }
    )
    return { target }
  }
}
</script>

<style lang="less">
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 1000px auto;
}
</style>
